<template>
  <div>
    <el-card>

      <el-form label-width="100px"
               label-position="right"
               :model="queryParams"
               class="form-control"
               ref="queryParams">

        <el-form-item label="用户id">
          <el-input v-model="queryParams.userId"
                    placeholder="请输入用户id"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="queryParams.nickName"
                    placeholder="请输入用户昵称"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="用户真实姓名">
          <el-input v-model="queryParams.realName"
                    placeholder="请输入用户真实姓名"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="queryParams.phone"
                    placeholder="请输入用户手机号码"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="queryParams.cardId"
                    placeholder="请输入身份证号码"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="身份认证">
          <el-select v-model="queryParams.isIdentity"
                     size="small"
                     placeholder="请选择">
            <el-option label="未认证"
                       :value="0">
            </el-option>

            <el-option label="待认证"
                       :value="1">
            </el-option>
            <el-option label="已认证"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="职业认证">
          <el-select v-model="queryParams.status"
                     size="small"
                     placeholder="请选择">
            <el-option label="未认证"
                       :value="0">
            </el-option>

            <el-option label="待认证"
                       :value="1">
            </el-option>
            <el-option label="已认证"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="学历认证">
          <el-select v-model="queryParams.isZyIdentity"
                     size="small"
                     placeholder="请选择">
            <el-option label="未认证"
                       :value="0">
            </el-option>

            <el-option label="待认证"
                       :value="1">
            </el-option>
            <el-option label="已认证"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="婚姻认证">
          <el-select v-model="queryParams.isXlIdentity"
                     size="small"
                     placeholder="请选择">
            <el-option label="未认证"
                       :value="0">
            </el-option>

            <el-option label="待认证"
                       :value="1">
            </el-option>
            <el-option label="已认证"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="账号状态">
          <el-select v-model="queryParams.isHyIdentity"
                     size="small"
                     placeholder="请选择">
            <el-option label="正常"
                       :value="0">
            </el-option>

            <el-option label="停用"
                       :value="1">
            </el-option>
            <el-option label="注销"
                       :value="2">
            </el-option>

          </el-select>
          <el-button size="mini"
                     type="primary"
                     icon="el-icon-search"
                     @click="getData()">搜索</el-button>
          <el-button icon='el-icon-refresh'
                     size="mini"
                     @click="resetQueryParms('queryParams')">重置</el-button>
        </el-form-item>

      </el-form>

      <el-table :data="tableData"
                v-loading="loading"
                style="width: 100%"
                height="500"
                :header-row-style="{}"
                :header-cell-style="{background:'#f8f8f9','text-align':'center'}"
                :cell-style="{'text-align':'center','height':'63px'}">
        <el-table-column prop="userId"
                         label="用户ID"
                         width="100"
                         height="60">
        </el-table-column>
        <el-table-column prop="nickName"
                         label="用户昵称"
                         width="120"
                         height="60">
        </el-table-column>
        <el-table-column prop="realName"
                         label="用户真实姓名"
                         width="120"
                         height="60">
        </el-table-column>
        <el-table-column prop="phone"
                         label="手机号"
                         width="120"
                         height="60">
        </el-table-column>
        <el-table-column prop="sex"
                         label="用户性别"
                         width="300"
                         height="60">
          <template slot-scope="scope">
            <span>{{scope.row.sex==1?'男':scope.row.sex==2?'女':'未知'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cardId"
                         label="身份证号码"
                         width="120">
        </el-table-column>
        <el-table-column prop="cardPicZm"
                         label="身份证正面"
                         width="120">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px;"
                      :src="scope.row.cardPicZm"
                      :preview-src-list="[scope.row.cardPicZm]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="cardPicFm"
                         label="身份证反面"
                         width="120">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px;"
                      :src="scope.row.cardPicFm"
                      :preview-src-list="[scope.row.cardPicFm]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="zjh"
                         label="外籍证件号码"
                         width="120"
                         height="60">
        </el-table-column>
        <el-table-column prop="zjUrlZm"
                         label="外籍证件正面"
                         width="120">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px;"
                      :src="scope.row.zjUrlZm"
                      :preview-src-list="[scope.row.zjUrlZm]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="zjUrlFm"
                         label="外籍证件反面"
                         width="120"
                         height="60"
                         style="height">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px;"
                      :src="scope.row.zjUrlFm"
                      :preview-src-list="[scope.row.zjUrlFm]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="inHandCard"
                         label="手持身份证照"
                         width="120">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px;"
                      :src="scope.row.inHandCard"
                      :preview-src-list="[scope.row.inHandCard]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="isIdentity"
                         label="身份认证状态"
                         width="120">
          <template slot-scope="scope">
            <span style="width: 100px; ">
              {{scope.row.isIdentity==0?'未认证':scope.row.isIdentity==1?'待认证':scope.row.isIdentity==2?'已认证':'已驳回'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="txUrl"
                         label="头像地址"
                         width="120">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px;"
                      :src="scope.row.txUrl"
                      :preview-src-list="[scope.row.txUrl]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="birthday"
                         label="生日"
                         width="120">
        </el-table-column>
        <el-table-column prop="status"
                         label="账号状态"
                         width="120">
          <template slot-scope="scope">
            <span>{{scope.row.status==0?'正常':scope.row.status==1?'停用':'注销'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间"
                         width="120">
        </el-table-column>
        <el-table-column prop="proName"
                         label="省名称"
                         width="120">
        </el-table-column>
        <el-table-column prop="cityName"
                         label="市名称"
                         width="120">
        </el-table-column>
        <el-table-column prop="areaName"
                         label="区名称"
                         width="100">
        </el-table-column>
        <el-table-column prop="nowMoney"
                         label="用户余额"
                         width="100">
        </el-table-column>
        <el-table-column prop="isVip"
                         label="会员等级"
                         width="80">
          <template slot-scope="scope">
            <span>{{scope.row.isVip==0?'普通':scope.row.isVip==1?'vip':'高级vip'}}</span>
          </template>

        </el-table-column>
        <el-table-column prop="vipExpireTime"
                         label="vip到期时间"
                         width="120">
        </el-table-column>

        <el-table-column fixed="right"
                         prop="userId"
                         label="操作"
                         width="120">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit"
                       type="text"
                       @click="updateHandler(scope.row.userId)">修改</el-button>
          </template>

        </el-table-column>
      </el-table>

      <div class="page"
           v-show="total!=0">
        <el-pagination background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-sizes="[8, 10, 12, 15]"
                       :page-size="queryParams.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>

    </el-card>

    <el-dialog top="30px"
               title="修改app用户信息通用"
               @closed="closed"
               :visible.sync="dialogVisible"
               width="35%">
      <el-form :model="formData"
               :rules="rules"
               ref="ruleForm"
               label-width="110px"
               class="diago">
        <el-form-item prop="isIdentity"
                      label="身份认证状态">
          <el-select v-model="formData.isIdentity"
                     size="small"
                     width="100px"
                     placeholder="请选择">
            <el-option label="未认证"
                       :value="0">
            </el-option>

            <el-option label="待认证"
                       :value="1">
            </el-option>
            <el-option label="已认证"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item prop="status"
                      label="账号状态">
          <el-select v-model="formData.status"
                     size="small"
                     width="100px"
                     placeholder="请选择">
            <el-option label="正常"
                       :value="0">
            </el-option>

            <el-option label="停用"
                       :value="1">
            </el-option>
            <el-option label="注销"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item prop="remark"
                      label="备注">
          <el-input size="small"
                    v-model="formData.remark"
                    placeholder="请输入备注"></el-input>
        </el-form-item>

        <el-form-item prop="isVip"
                      label="会员等级">
          <el-select v-model="formData.isVip"
                     size="small"
                     width="100px"
                     placeholder="请选择">
            <el-option label="普通"
                       :value="0">
            </el-option>

            <el-option label="vip"
                       :value="1">
            </el-option>
            <el-option label="高级VIP"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item prop="vipExpireTime"
                      label="vip到期时间">

          <el-date-picker v-model="formData.vipExpireTime"
                          size="small"
                          type="date"
                          placeholder="选择日期"
                          style="width: 100%;"></el-date-picker>

        </el-form-item>

        <el-form-item label="院校名称"
                      prop="xqqXb">
          <el-input size="small"
                    v-model="formData.xqqXb"
                    placeholder="请输入院校名称"></el-input>
        </el-form-item>

        <el-form-item label="公职名称"
                      prop="xqqGz">
          <el-input size="small"
                    v-model="formData.xqqGz"
                    placeholder="请输入公职名称"></el-input>
        </el-form-item>

        <el-form-item label="离异时长"
                      prop="xqqLl">
          <el-input size="small"
                    v-model="formData.xqqLl"
                    placeholder="请输入离异时长"></el-input>
        </el-form-item>
        <el-form-item label="颜值得分"
                      prop="xqqYz">
          <el-input size="small"
                    v-model="formData.xqqYz"
                    placeholder="请输入颜值得分"></el-input>
        </el-form-item>
        <el-form-item label="职业名称"
                      pro="xqqBl">
          <el-input size="small"
                    v-model="formData.xqqBl"
                    placeholder="请输入职业名称"></el-input>
        </el-form-item>

        <el-form-item label="职业认证"
                      prop="isZyIdentity">
          <el-select v-model="formData.isZyIdentity"
                     size="small"
                     width="100px"
                     placeholder="请选择">
            <el-option label="未认证"
                       :value="0">
            </el-option>

            <el-option label="待认证"
                       :value="1">
            </el-option>
            <el-option label="已认证"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="学历认证"
                      prop="isXlIdentity">
          <el-select v-model="formData.isXlIdentity"
                     size="small"
                     width="100px"
                     placeholder="请选择">
            <el-option label="未认证"
                       :value="0">
            </el-option>

            <el-option label="待认证"
                       :value="1">
            </el-option>
            <el-option label="已认证"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="婚姻认证"
                      prop="isHyIdentity">
          <el-select v-model="formData.isHyIdentity"
                     size="small"
                     width="100px"
                     placeholder="请选择">
            <el-option label="未认证"
                       :value="0">
            </el-option>

            <el-option label="待认证"
                       :value="1">
            </el-option>
            <el-option label="已认证"
                       :value="2">
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="用户手册">
          <template v-if="picList.length!=0">
            <template v-for="userPic in picList">
              <el-image v-show="userPic.ty==1&&userPic"
                        :key="userPic.id"
                        style="width: 70px; height: 70px;margin:5px"
                        :src="userPic.picUrl"
                        :preview-src-list="[userPic.picUrl]">
              </el-image>
            </template>

          </template>
        </el-form-item>
        <el-form-item label="职业认证-工牌">
          <template v-if="picList.length!=0">
            <template v-for="userPic in picList">
              <el-image v-show="userPic.ty==2&&userPic"
                        :key="userPic.id"
                        style="width: 70px; height: 70px;margin:5px"
                        :src="userPic.picUrl"
                        :preview-src-list="[userPic.picUrl]">
              </el-image>
            </template>

          </template>
        </el-form-item>
        <el-form-item label="职业认证合同">
          <template v-if="picList.length!=0">
            <template v-for="userPic in picList">
              <el-image v-show="userPic.ty==3&&userPic"
                        :key="userPic.id"
                        style="width: 70px; height: 70px;margin:5px"
                        :src="userPic.picUrl"
                        :preview-src-list="[userPic.picUrl]">
              </el-image>
            </template>

          </template>
        </el-form-item>
        <el-form-item label="学历">
          <template v-if="picList.length!=0">
            <template v-for="userPic in picList">
              <el-image v-show="userPic.ty==4&&userPic"
                        :key="userPic.id"
                        style="width: 70px; height: 70px;margin:5px"
                        :src="userPic.picUrl"
                        :preview-src-list="[userPic.picUrl]">
              </el-image>
            </template>

          </template>
        </el-form-item>
        <el-form-item label="婚姻">
          <template v-if="picList.length!=0">
            <template v-for="userPic in picList">
              <el-image v-show="userPic.ty==5&&userPic"
                        :key="userPic.id"
                        style="width: 70px; height: 70px;margin:5px"
                        :src="userPic.picUrl"
                        :preview-src-list="[userPic.picUrl]">
              </el-image>
            </template>

          </template>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="subupdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        userId: null,
        nickName: null,
        realName: null,
        phone: null,
        cardId: null,
        isIdentity: null,
        status: null,
        isZyIdentity: null,
        isXlIdentity: null,
        isHyIdentity: null
      },
      tableData: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      formData: {
        age: null,
        aliUserId: null,
        areaId: null,
        areaName: null,
        birthday: null,
        brokeragePrice: null,
        cancelTime: null,
        captcha: null,
        cardId: null,
        cardPicFm: null,
        cardPicZm: null,
        cityId: null,
        cityName: null,
        ckNum: null,
        countryId: null,
        countryName: null,
        createBy: null,
        createTime: null,
        email: null,
        grfm: null,
        gzhOpenId: null,
        hyType: null,
        hyTypeList: null,
        inHandCard: null,
        invitationCode: null,
        isDszn: null,
        isGk: null,
        isHyIdentity: null,
        isIdentity: null,
        isJrxqq: null,
        isJyly: null,
        isJyyh: null,
        isSc: null,
        isSyzs: null,
        isVip: null,
        isXlIdentity: null,
        isZd: null,
        isZyIdentity: null,
        isdz: null,
        jhType: null,
        jybj: null,
        jybjList: null,
        lat: null,
        lng: null,
        loginDate: null,
        loginIp: null,
        loginIsSh: null,
        mqAreaId: null,
        mqAreaName: null,
        mqCityId: null,
        mqCityName: null,
        mqCountryId: 110191,
        mqCountryName: null,
        mqProId: 110192,
        mqProName: null,
        myInfo: null,
        nickName: null,
        nowMoney: 999896,
        openId: null,
        params: null,
        password: null,
        phone: null,
        proId: null,
        proName: null,
        qcType: null,
        realName: null,
        remark: null,
        scNum: null,
        searchValue: null,
        sex: null,
        sg: null,
        spreadUid: null,
        sr: null,
        status: null,
        syzsUpTime: null,
        txUrl: null,
        tz: null,
        unionId: null,
        updateBy: null,
        updateTime: null,
        userId: null,
        userName: null,
        userPicList: null,
        userType: null,
        vipExpireTime: null,
        wechatName: null,
        xqah: null,
        xqqBl: null,
        xqqGz: null,
        xqqLl: null,
        xqqType: null,
        xqqXb: null,
        xqqYz: null,
        zdTime: null,
        zfType: null,
        zjHold: null,
        zjUrlFm: null,
        zjUrlZm: null,
        zjh: null,
        zoInfo: null,
        zy: null
      },
      picList: [],
      rules: {
        isIdentity: [{ required: true, message: '请输入身份状态', trigger: 'blur' }],
        status: [{ required: true, message: '请输入账号状态', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        isVip: [{ required: true, message: '请输入vip等级', trigger: 'blur' }],
        vipExpireTime: [{ required: true, message: '请输入vip到期时间', trigger: 'blur' }],
        xqqXb: [{ required: true, message: '请输入院校名称', trigger: 'blur' }],
        xqqGz: [{ required: true, message: '请输入公职名称', trigger: 'blur' }],
        xqqLl: [{ required: true, message: '请输入离异时长', trigger: 'blur' }],
        xqqYz: [{ required: true, message: '请输入颜值得分', trigger: 'blur' }],
        xqqBl: [{ required: true, message: '请输入职业名称', trigger: 'blur' }],
        isZyIdentity: [{ required: true, message: '请输入职业认证', trigger: 'blur' }],
        isXlIdentity: [{ required: true, message: '请输入学历认证', trigger: 'blur' }],
        isHyIdentity: [{ required: true, message: '请输入婚姻认证', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async getData() {
      this.loading = true
      let { data } = await this.$axios.get('com/user/list', { params: this.queryParams })

      this.tableData = data.rows
      this.total = data.total
      this.loading = false
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getData()
    },
    resetQueryParms(formName) {
      console.log(this.$refs.queryParams)
      this.queryParams = {
        pageNum: 1,
        pageSize: 3,
        userId: null,
        nickName: null,
        realName: null,
        phone: null,
        cardId: null,
        isIdentity: null,
        status: null,
        isZyIdentity: null,
        isXlIdentity: null,
        isHyIdentity: null
      }
    },
    async updateHandler(id) {
      this.loading = true
      let { data } = await this.$axios.get(`com/user/${id}`)
      console.log(data)
      console.log(data.data.userPicList)
      this.picList = data.data.userPicList

      this.formData = data.data
      this.loading = false
      this.dialogVisible = true
    },
    closed() {
      this.formData = {
        age: null,
        aliUserId: null,
        areaId: null,
        areaName: null,
        birthday: null,
        brokeragePrice: null,
        cancelTime: null,
        captcha: null,
        cardId: null,
        cardPicFm: null,
        cardPicZm: null,
        cityId: null,
        cityName: null,
        ckNum: null,
        countryId: null,
        countryName: null,
        createBy: null,
        createTime: null,
        email: null,
        grfm: null,
        gzhOpenId: null,
        hyType: null,
        hyTypeList: null,
        inHandCard: null,
        invitationCode: null,
        isDszn: null,
        isGk: null,
        isHyIdentity: null,
        isIdentity: null,
        isJrxqq: null,
        isJyly: null,
        isJyyh: null,
        isSc: null,
        isSyzs: null,
        isVip: null,
        isXlIdentity: null,
        isZd: null,
        isZyIdentity: null,
        isdz: null,
        jhType: null,
        jybj: null,
        jybjList: null,
        lat: null,
        lng: null,
        loginDate: null,
        loginIp: null,
        loginIsSh: null,
        mqAreaId: null,
        mqAreaName: null,
        mqCityId: null,
        mqCityName: null,
        mqCountryId: 110191,
        mqCountryName: null,
        mqProId: 110192,
        mqProName: null,
        myInfo: null,
        nickName: null,
        nowMoney: 999896,
        openId: null,
        params: null,
        password: null,
        phone: null,
        proId: null,
        proName: null,
        qcType: null,
        realName: null,
        remark: null,
        scNum: null,
        searchValue: null,
        sex: null,
        sg: null,
        spreadUid: null,
        sr: null,
        status: null,
        syzsUpTime: null,
        txUrl: null,
        tz: null,
        unionId: null,
        updateBy: null,
        updateTime: null,
        userId: null,
        userName: null,
        userPicList: null,
        userType: null,
        vipExpireTime: null,
        wechatName: null,
        xqah: null,
        xqqBl: null,
        xqqGz: null,
        xqqLl: null,
        xqqType: null,
        xqqXb: null,
        xqqYz: null,
        zdTime: null,
        zfType: null,
        zjHold: null,
        zjUrlFm: null,
        zjUrlZm: null,
        zjh: null,
        zoInfo: null,
        zy: null
      }
    },
    async subupdate() {
      this.dialogVisible = false
      let { data } = await this.$axios.put('com/user', this.formData)
      if (data.code != 200) return this.$message.error(data.msg)
      this.$message({ type: 'success', message: data.msg })
      this.getData()
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang="scss" >
.form-control {
  box-sizing: inherit;
  display: flex;

  flex-wrap: wrap;
}
.el-input--small .el-input__inner {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding-right: 30px;
}
.el-card__body {
  padding: 10px;
}
.page {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.diago {
  .el-select--small {
    width: 100%;
  }
}
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 40px;
} ///各行
</style>